<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/documentMyReady.js"></script>
    <style>
        body,p,h1{
            margin: 0;
            padding: 0;
        }
        .fold-wrap{
            width: 400px;
            height: 400px;
            border: 1px solid #cccccc;
            position: relative;
            margin: 20px auto;
            transition: all 1s;
            box-sizing: border-box;
            overflow: hidden;
        }
        @keyframes fold{
            from{height: 400px;}
            to{height: 0px;};
        }
        @keyframes open{
            from{height: 0px;}
            to{height: 400px;}
        }
        .fold-wrap-control {
            margin: 10px auto;
            width: 400px;
            display: flex;
            justify-content: space-around;
        }
        .fold-wrap-control button{
            line-height: 1.5;
            font-size: 15px;
        }
        
    </style>
    <script>
        "use strict";
        document.myReady(function(){
            //获取操作的dom
            let foldWrap = document.getElementsByClassName('fold-wrap')[0];
            //获取操作的control
                //fold
            let foldWrapControlFold = document.getElementsByClassName('fold-wrap-control')[0].getElementsByClassName('fold')[0];
                //open
            let foldWrapControlOpen = document.getElementsByClassName('fold-wrap-control')[0].getElementsByClassName('open')[0];
            //方法
            let init = function(){
                foldWrap.style.display = 'block';
            };
            let control = function(){
                //创建判断方法,方便移除
                let funDisN = function(){
                    foldWrap.style.display = 'none';
                }
                //添加收起监听  
                // 1：将属性设置为 block   
                // 2:添加收起动画
                // 3:添加动画完成监听（动画为将display 设置为none）
                //因为如果在最后设置为none，则没有动画产生，直接none  
                foldWrapControlFold.addEventListener('click',function(){
                    //防止重复动画
                    if(foldWrap.style.display == 'block'){
                        foldWrap.style.display = 'block';
                        foldWrap.style.animation = 'fold 2s forwards';
                        foldWrap.addEventListener('animationend',funDisN,false); 
                    }
                },false);

                //添加展开监听 
                // 1：移除'完成动画'监听
                // 2：将属性display设置block为了动画可以产生（因为为none动画无效）
                // 3:添加展开动画
                //因为如果不先移除'完成动画'监听，之后的展开动画，最终也会display为none
                foldWrapControlOpen.addEventListener('click',function(){
                    //防止重复动画
                    if(foldWrap.style.display == 'none'){
                        foldWrap.removeEventListener('animationend',funDisN,false);
                        
                        
                        foldWrap.style.display = 'block';
                        foldWrap.style.animation = 'open 2s forwards';
                    }               
                },false);
            };
            //操作
            (function(){
                init();
                control();
            }(window));
        });
    </script>
</head>
<body>
    <div class="fold-wrap-control">
        <button class="fold">折叠</button>
        <button class="open">展开</button>
    </div>
    <div class="fold-wrap">
        <div class="fold-wrap-content">
            <article>
                <h1>我是内容</h1>
                <p>我是描述我是描述我是描述我是描述我是描述</p>
            </article>
        </div>
    </div>
</body>
</html>